<template>
  <div>
    <panel-group :count="count" :height="90" />
    <div class="eachDiv eachDiv1" style="margin-bottom: 20px;">
      <el-card :shadow="defaultData.cardShadow">
        <HomeEcharts :isSlot="true" echartsId="chart" :height="550 - 90 - 20 - 40" :colors="colors"
          :information="chart.value" :title="'每日订单趋势'" types="line">
        </HomeEcharts>
      </el-card>
    </div>
    <div class="eachDiv eachDiv3" style="margin-bottom: 20px;">
      <el-card>
        <template #header>
          <div class="card-header">
            <span>订单日历列表</span>
          </div>
        </template>
        <div class="order-table-container">
          <el-table :data="tableData" size="small" border>
            <!-- 动态生成日期列 -->
            <el-table-column v-for="date in uniqueDates" :key="date" :label="date" width="285">
              <template #default="scope">
                <div v-if="scope.row[date]" class="order-content">
                  <div class="flex">
                    <div class="plate-number">车牌号：<span>{{ scope.row[date].plateNumber }}</span></div>
                    <div class="order-type">
                      订单类型：
                      <el-tag :type="orderTypeColorMap.get(scope.row[date].orderType) as any">
                        {{ orderTypeMap.get(scope.row[date].orderType) }}
                      </el-tag>
                    </div>
                  </div>
                  <div>订单时间：<span>{{ formatTime(scope.row[date].serviceStartTime, 'yyyy-MM-dd HH:mm:ss') }}</span></div>
                </div>
              </template>
            </el-table-column>
            <!-- 无数据时的提示 -->
            <template #empty>
              <div class="no-orders">无订单数据</div>
            </template>
          </el-table>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script lang="ts" setup name="Home">
import HomeEcharts from '@/components/easy-echart/index.vue'
import PanelGroup from './components/PanelGroup.vue'
import 'vue3-number-roll-plus/main.css'
import { useEchart, useTableData } from './indexData'
import { onMounted, computed } from 'vue'
import { formatTime } from '@/utils'
import { orderTypeMap, orderTypeColorMap } from '@/config/constants'

const {
  colors,
  count,
  chart,
} = useEchart()

const { orderList } = useTableData()

// 获取所有唯一日期（X轴）
const uniqueDates = computed(() => {
  const dates = new Set<string>()
  orderList.value.forEach((item: any) => {
    dates.add(formatTime(item.serviceStartTime, 'yyyy-MM-dd'))
  })
  return Array.from(dates).sort((a, b) => new Date(a).getTime() - new Date(b).getTime())
})

// 按日期分组并整理数据，确保每个日期列显示当天的订单，且按订单时间排序
const tableData = computed(() => {
  // 按日期分组订单，并对每个日期的订单按服务开始时间排序
  const ordersByDate: Record<string, any[]> = {};
  orderList.value.forEach((order: any) => {
    const date = formatTime(order.serviceStartTime, 'yyyy-MM-dd');
    if (!ordersByDate[date]) {
      ordersByDate[date] = [];
    }
    ordersByDate[date].push(order);
  });

  // 对每个日期的订单按服务开始时间排序
  Object.keys(ordersByDate).forEach(date => {
    ordersByDate[date].sort((a, b) => {
      return new Date(a.serviceStartTime).getTime() - new Date(b.serviceStartTime).getTime();
    });
  });

  // 找到最大订单数量的日期，确定表格行数
  const maxOrders = Math.max(...Object.values(ordersByDate).map(orders => orders.length), 1);

  // 构建表格数据，每行对应每个日期的第N个订单
  const data: any[] = [];
  for (let i = 0; i < maxOrders; i++) {
    const row: any = {};
    uniqueDates.value.forEach((date) => {
      row[date] = ordersByDate[date]?.[i] || null;
    });
    data.push(row);
  }

  return data;
})

</script>

<style lang="scss" scoped>
.eachDiv1 {
  grid-column-start: 1;
  grid-column-end: 4;

  .typeSwitch {
    display: flex;
    border-radius: 12.5px;
    width: 350px;
    height: 25px;
    line-height: 25px;
    font-size: 14px;
    overflow: hidden;
    background: #eff1f4;

    >div {
      flex: 1;
      text-align: center;
      color: var(--el-text-color-regular);
      background: var(--el-fill-color);
    }

    .switch-active {
      background: var(--el-color-primary);
      color: #fff;
    }
  }

  .lineColor {
    display: flex;
    align-items: center;

    >div {
      margin-right: 10px;
      display: flex;
      align-items: center;
    }

    >div:last-child {
      margin: 0;
    }

    i {
      width: 15px;
      height: 15px;
      border-radius: 2px;
      margin-right: 5px;
      display: inline-block;
    }
  }

  .timeDropdown {
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 25px;
    height: 25px;
    font-size: 14px;
    background: var(--el-fill-color);
  }
}

.eachDiv2 {
  grid-column-start: 4;
  grid-column-end: 5;
}

.eachDiv4 {
  grid-column-start: 2;
  grid-column-end: 5;

  :deep(.el-card) {
    height: 310px;

    >.el-card__body {
      height: 100%;
      box-sizing: border-box;
    }
  }
}

.eachDiv {
  width: 100%;
  // background: #fff;
  margin-bottom: 20rpx !important;


  .moneyGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 170px auto;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    // height: 450px;

    .eachDiv-3 {
      grid-row-start: 2;
      grid-column-start: 1;
      grid-column-end: 3;
    }

    .eachDiv {
      width: 100%;
      box-sizing: border-box;

      :deep() .el-card {
        height: 100%;
        display: flex;
        align-content: center;
        box-sizing: border-box;

        .el-card__body {
          width: 100%;
          padding: 10px 0;
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          justify-content: center;
        }
      }

      .viteIconBg,
      .text,
      .increase {
        margin: 0 auto 6px;
        text-align: center;

        .money {
          color: var(--el-color-primary-dark-2);
          font-size: 22px;
          font-weight: bold;
        }

        .title {
          color: #aaa;
        }
      }

      .increase,
      .increase i {
        font-weight: bold;
      }

      .viteIconBg {
        width: 60px;
        height: 60px;
        background: linear-gradient(to top,
            var(--el-color-primary),
            var(--el-color-primary-light-7));
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .yellow {
        background: linear-gradient(to top, #ffa30e, #ffdf76);
      }

      .viteIcon {
        color: #fff;
        font-size: 24px;
      }
    }
  }
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  font-size: 16px;
}

// .order-table-container {
//   overflow-x: auto;
//   padding: 10px;
//   max-height: 500px;
// }

:deep(.el-table__header-wrapper) {
  background-color: #f5f7fa;
}

:deep(.el-table__header th) {
  border: 1px solid #e4e7ed;
  padding: 10px;
  white-space: nowrap;
}

:deep(.el-table__body td) {
  border: 1px solid #e4e7ed;
  padding: 10px;
  min-height: 80px;
  vertical-align: top;
}

.plate-number span {
  font-weight: 700;
}

.order-type {
  font-size: 12px;
  color: #606266;
  margin-left: 10px;
}

.no-orders {
  text-align: center;
  padding: 20px;
  color: #909399;
}
</style>
